<template>
    <ZljHeader msg="标准指标管理">

    </ZljHeader>
    <el-container style="background-color: #f5f7fa;padding:0 ;">
        <el-main style="margin:1rem 1rem 0 1rem;background-color: rgb(255, 255, 255);">
            <div class="pick">
                <h4>数据筛选</h4>
                <div class="pick-form">
                    <div>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="输入查询：">
                                <el-input v-model="formInline.nname" placeholder="指标名称:" clearable />
                            </el-form-item>
                            <el-form-item label="是否对比:">
                                <el-select v-model="formInline.ncomparison" placeholder="全部" clearable>
                                    <el-option label="是" value="是" />
                                    <el-option label="否" value="否" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-form-item>
                    </div>
                </div>
            </div>

            <div class="pick-btn">
                <el-button @click="addtable = true">添加</el-button>
                <el-button @click="remove">删除</el-button>

                <el-button>导入</el-button>
            </div>
            <!-- 表格 -->
            <div class="pick-table">
                <el-table ref="multipleTableRef" header-align="center" align="center" :data="tableData" border stripe
                    style="width: 100%; text-align:center" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" style="background-color: #eee;" />
                    <el-table-column property="ncode" label="标准指标ID" header-align="center" align="center" />
                    <el-table-column property="nname" label="标准指标名称" header-align="center" align="center"
                        show-overfnlowPrompt-tooltip />
                    <el-table-column property="nunit" label="指标单位" header-align="center" align="center" />
                    <el-table-column property="nceiling" label="参考上限" header-align="center" align="center"
                        show-overfnlowPrompt-tooltip />
                    <el-table-column property="nfloor" label="参考下限" header-align="center" align="center" />
                    <el-table-column property="nnormalPrompt" label="正常提示" header-align="center" align="center"
                        show-overfnlowPrompt-tooltip>
                    </el-table-column>

                    <el-table-column property="nhighPrompt" label="偏高提示" header-align="center" align="center"
                        show-overfnlowPrompt-tooltip>
                    </el-table-column>

                    <el-table-column property="nlowPrompt" label="偏低提示" header-align="center" align="center"
                        show-overfnlowPrompt-tooltip>
                    </el-table-column>

                    <el-table-column property="ncomparison" label="是否比对" header-align="center" align="center"
                        show-overfnlowPrompt-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.ncomparison == 0 ? '否' : '是' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" header-align="center" align="center">
                        <template #default="scope">
                            <el-button style="color: #1ABC9C;" link type="success" size="small"
                                @click="handleClick(scope.row)">编辑</el-button>

                            <el-popconfirm title="确定要删除吗?" @confirm="del(scope.row)">
                                <template #reference>
                                    <el-button style="color: #1ABC9C;" link type="success" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>

                        </template>

                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-config-provider :locale="locale">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>
            <!-- 新增 -->
            <div class="dialog">
                <el-dialog v-model="addtable" title="新增体检指标" custom-class="custom-dialog">
                    <el-form :model="addData" style="height: 30rem;overflow-y: auto;">
                        <el-form-item label="标准指标名称:" class="text1" :label-width="100">
                            <el-input v-model="addData.nname" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="是否对比:" class="text1" :label-width="100">
                            <el-switch v-model="addData.ncomparison" class="input">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="指标单位：" class="text1" :label-width="100">
                            <el-input v-model="addData.nunit" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="参考上限：" class="text1" :label-width="100">
                            <el-input v-model="addData.nceiling" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="参考下限：" class="text1" :label-width="100">
                            <el-input v-model="addData.nfloor" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="正常提示：" class="text1">
                            <el-input v-model="addData.nnormalPrompt" autocomplete="off" type="textarea" :rows="4" />
                        </el-form-item>
                        <el-form-item label="偏高提示：" class="text1" :label-width="100">
                            <el-input v-model="addData.nhighPrompt" autocomplete="off" type="textarea" :rows="4" />
                        </el-form-item>
                        <el-form-item label="偏低提示：" class="text1" :label-width="100">
                            <el-input v-model="addData.nlowPrompt" autocomplete="off" type="textarea" :rows="4" />
                        </el-form-item>
                    </el-form>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="addtable = false">取消</el-button>
                            <el-button type="primary" @click="submit"> 确认 </el-button>
                        </span>
                    </template>
                </el-dialog>

            </div>

            <!-- 编辑 -->
            <div class="dialog">
                <el-dialog v-model="editable" title="新增体检指标">
                    <el-form :model="editData" style="height: 30rem;overflow-y: auto;">
                        <el-form-item label="标准指标名称:" class="text1" :label-width="100">
                            <el-input v-model="editData.nname" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="是否对比:" class="text1" :label-width="100">
                            <el-switch v-model="editData.ncomparison" class="input">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="指标单位：" class="text1" :label-width="100">
                            <el-input v-model="editData.nunit" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="参考上限：" class="text1" :label-width="100">
                            <el-input v-model="editData.nceiling" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="参考下限：" class="text1" :label-width="100">
                            <el-input v-model="editData.nfloor" autocomplete="off" class="input" />
                        </el-form-item>
                        <el-form-item label="正常提示：" class="text1" :label-width="100">
                            <el-input v-model="editData.nnormalPrompt" autocomplete="off" type="textarea" :rows="4" />
                        </el-form-item>
                        <el-form-item label="偏高提示：" class="text1" :label-width="100">
                            <el-input v-model="editData.nhighPrompt" autocomplete="off" type="textarea" :rows="4" />
                        </el-form-item>
                        <el-form-item label="偏低提示：" class="text1" :label-width="100">
                            <el-input v-model="editData.nlowPrompt" autocomplete="off" type="textarea" :rows="4" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="editable = false">取消</el-button>
                            <el-button type="primary" @click="add"> 确认 </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>

        </el-main>
    </el-container>
</template>
<script lang="ts" setup>
import { getTarget, addTarget, editTarget, deleteTarget, detrStarget, editDate } from '../apis/target'
import { ref, reactive } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
interface User {
    nid: Number;
    nname: string,
    ncode: string;
    nunit: string;
    nceiling: string;
    nfloor: string;
    ncomparison: number;
    nnormalPrompt: string;
    nhighPrompt: string;
    nlowPrompt: string;
}

const addData = reactive({
    nid: Number,
    nname: '',
    ncode: '',
    nunit: '',
    nceiling: '',
    nfloor: '',
    ncomparison: 0,
    nnormalPrompt: '',
    nhighPrompt: '',
    nlowPrompt: ''
});
const editData = reactive({
    nid: Number,
    nname: '',
    ncode: '',
    nunit: '',
    nceiling: '',
    nfloor: '',
    ncomparison: 0,
    nnormalPrompt: '',
    nhighPrompt: '',
    nlowPrompt: ''
});

let tableData = reactive<User[]>([])
const formInline = reactive({
    nname: '',
    ncomparison: ''
})

const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const total = ref(false)
const value = ref(true);
const addtable = ref(false);
const editable = ref(false);
const locale = zhCn;//分页语言设置
const currentPage4 = ref(1)
const pageSize4 = ref(5);
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 查询
const onSubmit = async () => {
    // formInline.nname = ''
    // formInline.ncomparison = ''
    render()
    // ElMessage.success('查询成功');
}
// 重置
const reset = () => {
    formInline.nname = ''
    formInline.ncomparison = ''
    currentPage4.value = 1;

    render();
}
//删除
const del = async (row) => {
    try {
        const { data } = await deleteTarget(row.nid);
        if (data.code == 0) {
            // 更新tableData和total的值
            tableData = tableData.filter(item => item.nid !== row.nid);
            total.value = data.data.total;
            ElMessage.success('删除成功');
            render()
        }
    } catch (error) {
        // 处理错误信息
        console.error('删除失败', error);
    }
}

// 渲染
const render = () => {
    getTarget(currentPage4.value, pageSize4.value, formInline.nname, formInline.ncomparison).then(({ data }) => {
        console.log(formInline.nname);
        console.log(formInline.ncomparison);
        tableData.length = 0
        tableData.push(...data.data)
        total.value = data.count
    })
}
render()
// 编辑
const handleClick = async (row) => {
    editable.value = true;
    const { data } = await editDate(row.nid)
    if (data.code == 0) {
        let dorm = data.data.ncomparison == 1 ? true : false;
        data.data.ncomparison = dorm;
        editData.nid = row.nid;
        editData.nname = row.nname;
        editData.ncode = row.ncode;
        editData.nlowPrompt = row.nlowPrompt;
        editData.nunit = row.nunit;
        editData.nceiling = row.nceiling;
        editData.nhighPrompt = row.nhighPrompt;
        editData.nnormalPrompt = row.nnormalPrompt;
        editData.nfloor = row.nfloor;
        editData.ncomparison = data.data.ncomparison
    }
}
// 编辑
const add = async () => {
    const enable = editData.ncomparison == true ? 1 : 0;
    editData.ncomparison = enable;

    const { data } = await editTarget(editData);
    if (data.code == 0) {
        editable.value = false;
        render();
        ElMessage.success('修改成功');
    }
}
// 批量删除
let multArry = reactive([])
const remove = async () => {
    for (let i = 0; i < multipleSelection.value.length; i++) {
        multArry.push(multipleSelection.value[i].nid)
        let arr = Object.values(multArry)
        multArry = arr
    }
    if (multipleSelection.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }

}
const deleteData = async (v) => {
    const { data } = await detrStarget(multArry)
    if (data.code == 0) {
        // multArry = []
        render()
        ElMessage.success('删除成功');
    } else {
        ElMessage.error('删除失败');
    }
};
render()
//添加
const submit = async () => {
    const enable = addData.ncomparison == true ? 1 : 0;
    addData.ncomparison = enable;
    try {
        const { data } = await addTarget(addData);
        if (data.code == 0) {
            ElMessage.success('添加成功');
            addtable.value = false;
            render(); // 确保render函数能正确将数据渲染到表格上
        } else {
            ElMessage.error('添加失败');
        }
    } catch (error) {
        console.error('添加失败:', error);
        ElMessage.error('添加失败');
    }
};
const count = ref(5)
const handleSizeChange = (val: number) => {
    pageSize4.value = val;
    console.log(val)
    render();
}
const handleCurrentChange = (val: number) => {
    currentPage4.value = val;
    render();
}
// onMounted(render)
</script>

<style lang="less" scoped>
.input {
    height: 2.5rem;
    width: 20rem;

}

// 星
.text1::before {

    content: "*";
    // padding-left: 2rem;
    width: 2rem;
    padding-top: 0.5rem;
    color: red;
}

.el-table-column {
    text-align: center;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    margin-right: 16px;
    background-color: red;
}

.el-dialog__body {
    padding: 0;
}

//勾选框
.but {
    padding-bottom: 1rem;

    .el-button {
        border: 0.25px solid #282626be;
        width: 8rem;
        color: #000;
        background-color: #dbd7d79d;
    }
}



header {
    background-color: #fff;
    margin-left: 1rem;

    div {
        height: 4rem;
        line-height: 4rem;
        margin-left: 1rem;
        font-size: 1.8rem;
    }
}

.el-main {
    padding: 0;
    position: relative;
}

:deep(.el-table) {
    text-align: center;
}

.pick {
    border: 1px solid #ccc;
    margin: 0 1rem 0 1rem;

    h4 {
        padding-left: 1rem;
    }

    .pick-form {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #ccc;
        padding-top: 1.5rem;
        padding-left: 1rem;
    }
}

.pick-btn {
    margin-left: 2rem;
    margin-top: 1rem;
}

.el-container {
    height: calc(100% - 4rem);
}

.pick-table {
    margin: 1.3rem 1rem 0 2rem;
}



.el-table .cell::before {

    text-align: center;

}

.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 2rem;
    margin-right: 1rem;

    :deep(.el-pager li.is-active) {
        color: #1ABC9C;
    }

    :deep(.el-pager li:hover) {
        color: #1ABC9C;

    }

    :deep(.el-pagination button:hover) {
        color: #1ABC9C;
    }
}

:deep(.dialog) {
    .el-dialog {
        width: 60rem;
        height: 30rem;

        .el-dialog__header {
            height: 4rem;
            background-color: #eee;
            margin: 0;
            padding: 0;
            line-height: 4.5rem;

            .el-dialog__title {
                margin-left: 2rem;
            }
        }

        .el-dialog__footer {
            padding: 1rem 3rem;
            background-color: #fff;
            border-top: 1px solid #ccc;
        }

        .el-dialog__body {
            padding: 0 !important;
            background-color: #fff;
        }
    }
}
</style>